<!--<style>
    * { margin: 0; padding: 0 }
    body {  background: url(../img/top.jpg) no-repeat center top #075498; color: #fff }
    img { border: 0;
        display: block;
        height: 60px;
        margin-right: 50px;
        margin-bottom: 20px;
    }
    /*div{margin:5px;border:0;padding:0;}*/
</style>-->
<div class="container">
    <table class="table">
        <caption class="text-center" style="font-size: 40px">Time Table</caption>
        <button style="display: inline; padding:10px; background-color:#f9f2f4; margin-top: 40px; float:right;"
                class="glyphicon glyphicon-ok" ng-click="saveTimetable()"></button>
        <thead>
        <tr>
            <th style="font-size:x-large;"></th>
            <th style="font-size:x-large;text-align: center">上午</th>
            <th style="font-size:x-large;text-align: center">下午</th>
            <th style="font-size:x-large;text-align: center">晚上</th>
        </tr>
        </thead>
        <tbody>
        <tr>

            <td style="font-size:x-large;padding-bottom: 16px;padding-top: 16px;">Mon</td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Mon','MorningStart')">{{timetable.Mon.MorningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Mon','MorningEnd')">{{timetable.Mon.MorningEnd}}</span>
            </td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Mon','AfternoonStart')">{{timetable.Mon.AfternoonStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time"
                      ng-click="editTimetable('Mon','AfternoonEnd')">{{timetable.Mon.AfternoonEnd}}</span>
            </td>


            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Mon','EveningStart')">{{timetable.Mon.EveningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Mon','EveningEnd')">{{timetable.Mon.EveningEnd}}</span>
            </td>


        </tr>
        <tr>

            <td style="font-size:x-large;padding-bottom: 16px;padding-top: 16px;">Tue</td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Tue','MorningStart')">{{timetable.Tue.MorningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Tue','MorningEnd')">{{timetable.Tue.MorningEnd}}</span>
            </td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Tue','AfternoonStart')">{{timetable.Tue.AfternoonStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time"
                      ng-click="editTimetable('Tue','AfternoonEnd')">{{timetable.Tue.AfternoonEnd}}</span>
            </td>


            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Tue','EveningStart')">{{timetable.Tue.EveningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Tue','EveningEnd')">{{timetable.Tue.EveningEnd}}</span>
            </td>


        </tr>
        <tr>

            <td style="font-size:x-large;padding-bottom: 16px;padding-top: 16px;">Wed</td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Wed','MorningStart')">{{timetable.Wed.MorningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Wed','MorningEnd')">{{timetable.Wed.MorningEnd}}</span>
            </td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Wed','AfternoonStart')">{{timetable.Wed.AfternoonStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time"
                      ng-click="editTimetable('Wed','AfternoonEnd')">{{timetable.Wed.AfternoonEnd}}</span>
            </td>


            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Wed','EveningStart')">{{timetable.Wed.EveningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Wed','EveningEnd')">{{timetable.Wed.EveningEnd}}</span>
            </td>


        </tr>
        <tr>

            <td style="font-size:x-large;padding-bottom: 16px;padding-top: 16px;">Thur</td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Thur','MorningStart')">{{timetable.Thur.MorningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Thur','MorningEnd')">{{timetable.Thur.MorningEnd}}</span>
            </td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Thur','AfternoonStart')">{{timetable.Thur.AfternoonStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time"
                      ng-click="editTimetable('Thur','AfternoonEnd')">{{timetable.Thur.AfternoonEnd}}</span>
            </td>


            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Thur','EveningStart')">{{timetable.Thur.EveningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Thur','EveningEnd')">{{timetable.Thur.EveningEnd}}</span>
            </td>


        </tr>
        <tr>

            <td style="font-size:x-large;padding-bottom: 16px;padding-top: 16px;">Fri</td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Fri','MorningStart')">{{timetable.Fri.MorningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Fri','MorningEnd')">{{timetable.Fri.MorningEnd}}</span>
            </td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Fri','AfternoonStart')">{{timetable.Fri.AfternoonStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time"
                      ng-click="editTimetable('Fri','AfternoonEnd')">{{timetable.Fri.AfternoonEnd}}</span>
            </td>


            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Fri','EveningStart')">{{timetable.Fri.EveningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Fri','EveningEnd')">{{timetable.Fri.EveningEnd}}</span>
            </td>


        </tr>
        <tr>

            <td style="font-size:x-large;padding-bottom: 16px;padding-top: 16px;">Sat</td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Sat','MorningStart')">{{timetable.Sat.MorningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Sat','MorningEnd')">{{timetable.Sat.MorningEnd}}</span>
            </td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Sat','AfternoonStart')">{{timetable.Sat.AfternoonStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time"
                      ng-click="editTimetable('Sat','AfternoonEnd')">{{timetable.Sat.AfternoonEnd}}</span>
            </td>


            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Sat','EveningStart')">{{timetable.Sat.EveningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Sat','EveningEnd')">{{timetable.Sat.EveningEnd}}</span>
            </td>


        </tr>
        <tr>

            <td style="font-size:x-large;padding-bottom: 16px;padding-top: 16px;">Sun</td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Sun','MorningStart')">{{timetable.Sun.MorningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Sun','MorningEnd')">{{timetable.Sun.MorningEnd}}</span>
            </td>

            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Sun','AfternoonStart')">{{timetable.Sun.AfternoonStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time"
                      ng-click="editTimetable('Sun','AfternoonEnd')">{{timetable.Sun.AfternoonEnd}}</span>
            </td>


            <td style="text-align: center;padding-bottom: 16px;padding-top: 16px;opacity: 0.8">
                <span class="time"
                      ng-click="editTimetable('Sun','EveningStart')">{{timetable.Sun.EveningStart}}</span>
                <span style="display: inline; padding: 10px;" class="glyphicon glyphicon-minus"></span>
                <span class="time" ng-click="editTimetable('Sun','EveningEnd')">{{timetable.Sun.EveningEnd}}</span>
            </td>


        </tr>


        </tbody>
    </table>


</div>
